<template>
	<view class="h-6 mb-3 w-full">
		<u-picker :show="show" :closeOnClickOverlay="true" :columns="columns" @cancel="show = false"  @confirm="confirm"
			@close="show = false" :keyName="keyName"></u-picker>
		<u-button class="z-picker-btn" @click="openPicker">{{label}}</u-button>
	</view>
</template>

<script>
	import props from '../../uni_modules/uview-plus/libs/config/props';
	export default {
		props: {
			'itemList': Array,
			'placeholder': String,
			'itemLabel': String,
			'itemKey': String,
			'defaultValue': String,
			"parent":String
		},
		emits: ['selectVal','toast'],
		name: "picker",
		data() {
			return {
				show: false,
				value:{},
				label:'',
				keyName:'',
				labelName:''
			};
		},
		watch: {
			show: {
				handler(newVal) {
					if(newVal&&!this.parent){
						console.log('toast提示');
						this.show = !this.show
						this.$emit( 'toast',{} )
					}
				}
			},
			defaultValue: {
				handler(newVal) {
					 this.label = newVal?newVal:this.placeholder
				}
			}
		},
		computed: {
			columns(newvlue,oldvalue){
				const defaultValue = this.defaultValue
				if(this.itemList[0]!=undefined){
					this.itemList[0].forEach(item=>{
						if(defaultValue==item[this.keyName]){
							// this.select(item)
						}
					})
				}
				
				return this.itemList
			}
		},
		created() {
			this.label = this.defaultValue?this.defaultValue:this.placeholder
			this.labelName = this.itemLabel
			this.keyName = this.itemKey
			
		},
		methods: {
			openPicker(){
				if(!this.parent){
					console.log('toast提示');
					this.show = false
					this.$emit( 'toast',{} )
					return
				}
				this.show = true	
				this.$emit( 'selectVal')
			},
			select(item){
				this.value = item
				this.label = item[this.labelName]
				 this.$emit( 'selectVal', item)
			},
			confirm(e) {
				this.show = false
				this.select(e.value[0])
			}
		}
	}
</script>

<style>
	.z-picker-btn {
		justify-content: start !important;
	}
</style>